<template>
  <div class="register-page">
    <!-- 背景层 -->
    <div class="background-layer">
      <div class="background-overlay"></div>
    </div>

    <!-- 注册卡片 -->
    <div class="register-container">
      <el-card class="register-card" shadow="always">
        <!-- 标题和logo布局 -->
        <div class="system-header">
          <div class="header-content">
            <img src="../assets/logo.png" class="system-logo" alt="系统logo">
            <div class="title-wrapper">
              <h1 class="system-title">用户注册</h1>
              <p class="system-subtitle">创建您的专属账户</p>
            </div>
          </div>
        </div>

        <!-- 注册表单 -->
        <el-form
            ref="registerForm"
            :model="registerForm"
            :rules="registerRules"
            label-width="100px"
            class="register-form"
        >
          <!-- 注册类型选择 -->
          <el-form-item label="注册类型" prop="registerType">
            <el-select v-model="registerForm.registerType" placeholder="请选择注册类型">
              <el-option label="账号注册" value="account"></el-option>
              <el-option label="手机号注册" value="phone"></el-option>
            </el-select>
          </el-form-item>

          <!-- 用户名输入（仅账号注册显示） -->
          <el-form-item
              label="用户名"
              prop="username"
              v-if="registerForm.registerType === 'account'"
          >
            <el-input v-model="registerForm.username" placeholder="请输入用户名"></el-input>
          </el-form-item>

          <!-- 手机号输入（仅手机号注册显示） -->
          <el-form-item
              label="手机号"
              prop="phone"
              v-if="registerForm.registerType === 'phone'"
          >
            <el-input v-model="registerForm.phone" placeholder="请输入手机号"></el-input>
          </el-form-item>

          <!-- 密码输入 -->
          <el-form-item label="密码" prop="password">
            <el-input
                v-model="registerForm.password"
                type="password"
                placeholder="请输入密码"
                show-password
            ></el-input>
          </el-form-item>

          <!-- 确认密码 -->
          <el-form-item label="确认密码" prop="confirmPassword">
            <el-input
                v-model="registerForm.confirmPassword"
                type="password"
                placeholder="请再次输入密码"
                show-password
            ></el-input>
          </el-form-item>

          <!-- 用户协议 -->
          <el-form-item prop="agreed">
            <el-checkbox v-model="registerForm.agreed">
              我已阅读并同意<el-link type="primary" @click="showAgreement">《用户协议》</el-link>
            </el-checkbox>
          </el-form-item>

          <!-- 注册按钮 -->
          <el-form-item>
            <el-button
                type="primary"
                class="register-btn"
                @click="submitRegister"
                :loading="isRegistering"
            >
              立即注册
            </el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>

import axios from "axios";

export default {
  data() {
    return {
      registerForm: {
        registerType: 'account', // 默认账号注册
        username: '',
        phone: '',
        password: '',
        confirmPassword: '',
        agreed: false
      },
      registerRules: {
        registerType: [
          { required: true, message: '请选择注册类型', trigger: 'change' }
        ],
        username: [
          {
            required: true,
            message: '请输入用户名',
            trigger: 'blur',
            validator: (rule, value, callback) => {
              if (this.registerForm.registerType === 'account' && !value) {
                callback(new Error('请输入用户名'))
              } else {
                callback()
              }
            }
          },
          { min: 4, max: 16, message: '长度在4到16个字符', trigger: 'blur' }
        ],
        phone: [
          {
            required: true,
            message: '请输入手机号',
            trigger: 'blur',
            validator: (rule, value, callback) => {
              if (this.registerForm.registerType === 'phone' && !value) {
                callback(new Error('请输入手机号'))
              } else {
                callback()
              }
            }
          },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 20, message: '长度在6到20个字符', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (!/^(?=.*[a-z])(?=.*\d).+$/.test(value)) {
                callback(new Error('密码必须包含字母和数字'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ],
        confirmPassword: [
          { required: true, message: '请再次输入密码', trigger: 'blur' },
          { validator: this.validateConfirmPassword, trigger: 'blur' }
        ],
        agreed: [
          { validator: this.validateAgreement, trigger: 'change' }
        ]
      },
      isRegistering: false
    }
  },
  methods: {
    validateConfirmPassword(rule, value, callback) {
      if (value !== this.registerForm.password) {
        callback(new Error('两次输入密码不一致'))
      } else {
        callback()
      }
    },
    validateAgreement(rule, value, callback) {
      if (!value) {
        callback(new Error('请同意用户协议'))
      } else {
        callback()
      }
    },
    showAgreement() {
      this.$alert('这里是用户协议内容', '用户协议', {
        confirmButtonText: '确定',
        customClass: 'agreement-modal'
      })
    },

    // 实现逻辑
    async submitRegister() {
      try {
        // 先验证表单
        await this.$refs.registerForm.validate()

        // 检查用户协议
        if (!this.registerForm.agreed) {
          this.$message.error('请同意用户协议')
          return
        }

        this.isRegistering = true

        // 构建注册数据
        const registerData = {
          type: this.registerForm.registerType,
          password: this.registerForm.password
        }

        // 根据注册类型添加不同字段
        if (this.registerForm.registerType === 'account') {
          registerData.username = this.registerForm.username
        } else {
          registerData.phone = this.registerForm.phone
        }

        // 调用注册API
        const response = await axios.post('http://localhost:6063/views/register', registerData)

        if (response.data.code === 200) {
          this.$message.success('注册成功')
          // 注册成功后的跳转逻辑
          this.$router.push('/login')
        } else {
          this.$message.error(response.data.message || '注册失败')
        }
      } catch (error) {
        if (error.response) {
          // 服务器返回的错误
          this.$message.error(error.response.data.message || '注册失败')
        } else {
          // 其他错误
          this.$message.error('注册失败: ' + error.message)
        }
      } finally {
        this.isRegistering = false
      }
    }
  }
}
</script>

<style scoped>
.register-page {
  position: relative;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f7fa;
}

/*背景样式*/
.background-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../assets/rgbg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}

/*半透明遮罩层，提高前景内容可读性*/
.background-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.6);
}

.register-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 500px;
  padding: 20px;
}

.register-card {
  position: relative;
  z-index: 2;
  background-color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(2px);
  border-radius: 10px;
  width: 500px;
  padding: 30px;
}

.system-header {
  margin-bottom: 30px;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: center;
}

.system-logo {
  width: 60px;
  height: 60px;
  margin-right: 15px;
}

.title-wrapper {
  text-align: center;
}

.system-title {
  margin: 0;
  font-size: 24px;
  color: #303133;
}

.system-subtitle {
  margin: 5px 0 0;
  font-size: 14px;
  color: #909399;
}

.register-form {
  margin-top: 20px;
}

.register-btn {
  width: 100%;
  margin-top: 10px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .title-wrapper {
    text-align: center;
  }

  .register-card {
    width: 90%;
    padding: 20px;
  }
}
</style>

<style>
/* 用户协议弹窗样式 */
.agreement-modal {
  width: 80%;
  max-width: 800px;
}
</style>
